<?php

namespace JsonLowCode\Form\Fields;

use JsonLowCode\Schema;
use JsonLowCode\UI\DatePicker;
use JsonLowCode\Form\Abstract\FieldAbstract;
use JsonLowCode\Form\Traits\HasDisabled;
use JsonLowCode\Form\Traits\HasPlaceholder;
use JsonLowCode\Form\Traits\HasReadonly;
use JsonLowCode\Form\Traits\HasSize;

/**
 * @property DatePicker $element
 */
class DatePickerField extends FieldAbstract
{
    use HasDisabled, HasSize, HasReadonly, HasPlaceholder;

    protected string|null $placeholder = null;

    protected function booting(): void
    {
        $this->element = new DatePicker();
    }

    protected function booted(): void
    {
        $this->element->removeProp("v-model:value");
        $this->element->bindModel('formattedValue', $this->bindField);
    }

    /**
     * Date Picker 的类型
     * @param string $type 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'monthrange' | 'year' | 'quarter' | 'quarterrange'
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function type(string $type = 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'monthrange' | 'year' | 'quarter' | 'quarterrange', bool $isJSExpression = false): static
    {
        $this->element->type($type, $isJSExpression);
        return $this;
    }

    /**
     * 面板的弹出位置
     * @param string $placement 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function placement(string $placement = 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end', bool $isJSExpression = false): static
    {
        $this->element->placement($placement, $isJSExpression);
        return $this;
    }

    /**
     * 验证状态
     * @param string $value 'success' | 'warning' | 'error'
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function status(string $value = 'success' | 'warning' | 'error',  bool $isJSExpression = false): static
    {
        $this->element->status($value, $isJSExpression);
        return $this;
    }

    /**
     * Date Picker 格式化后默认值 string | [string, string] | null
     * @param string $value
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function defaultFormattedValue(string $value,  bool $isJSExpression = false): static
    {
        $this->element->defaultFormattedValue($value, $isJSExpression);
        return $this;
    }

    /**
     * 使用格式化之后的值
     * @param string $value string | [string, string] | null
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function formattedValue(string $value,  bool $isJSExpression = false): static
    {
        $this->element->formattedValue($value, $isJSExpression);
        return $this;
    }

    /**
     * 格式化
     * @param string $value yyyy-MM-dd HH:mm:ss
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function format(string $value,  bool $isJSExpression = false): static
    {
        $this->element->format($value, $isJSExpression);
        return $this;
    }

    /**
     * 绑定值的格式，详情见
     * @param string $value
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function valueFormat(string $value,  bool $isJSExpression = false): static
    {
        $this->element->valueFormat($value, $isJSExpression);
        return $this;
    }

    /**
     * 日历上一周的开始，0 代表周一
     * @param string|int $value
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function firstDayOfWeek(string|int $value = 0 | 1 | 2 | 3 | 4 | 5 | 6,  bool $isJSExpression = false): static
    {
        $this->element->firstDayOfWeek($value, $isJSExpression);
        return $this;
    }

    /**
     * 设置输入框为只读（避免在移动设备上打开虚拟键盘）
     * @param string|bool $bool
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function readonly(string|bool $bool = true,  bool $isJSExpression = false): static
    {
        $this->element->readonly($bool, $isJSExpression);
        return $this;
    }

    /**
     * 是否只使用面板
     * @param string|bool $bool
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function panel(string|bool $bool = true,  bool $isJSExpression = false): static
    {
        $this->element->panel($bool, $isJSExpression);
        return $this;
    }

    /**
     * 自定义快捷按钮
     * @param string $value Record<string, number | (() => number)> | Record<string, [number, number] | (() => [number, number])>
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function shortcuts(string $value,  bool $isJSExpression = false): static
    {
        $this->element->shortcuts($value, $isJSExpression);
        return $this;
    }

    /**
     * 日期图标
     * @param Schema $value
     * @param bool $isJSExpression 是否js表达式
     * @return $this
     */
    public function dateIcon(Schema $value,  bool $isJSExpression = false): static
    {
        $this->element->slotDateIcon($value, $isJSExpression);
        return $this;
    }

    protected function render(): void
    {
        if ($this->placeholder!=null){
            $this->element->placeholder($this->placeholder);
        }
    }
}
